<template>
  <KrdPage>
    <view class="case-list">
      <view class="case-item" v-for="(item, index) in cases" :key="index">
        <image :src="item.cover" class="case-cover" mode="aspectFill" />
        <view class="case-info">
          <text class="case-title">{{ item.title }}</text>
          <text class="case-date">
            开工: {{ item.startDate }} 竣工: {{ item.endDate }}
          </text>
        </view>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref } from "vue";
import KrdPage from "@/components/KrdPage.vue";

const cases = ref([
  {
    cover: "/static/case1.jpg",
    title: "某某市污水处理厂",
    startDate: "2022-01-15",
    endDate: "2022-12-20",
  },
  {
    cover: "/static/case2.jpg",
    title: "某某工业园区污水处理项目",
    startDate: "2023-03-10",
    endDate: "2023-11-30",
  },
  {
    cover: "/static/case3.jpg",
    title: "某某县乡镇污水处理站",
    startDate: "2024-02-01",
    endDate: "2024-08-15",
  },
]);
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.case-list {
  width: 100%;
}

.case-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.case-cover {
  width: 100%;
  height: 300rpx;
}

.case-info {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  background-color: #fff;
}

.case-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.case-date {
  font-size: 24rpx;
  color: #666;
}
</style>
